<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>bootstrap-响应式布局媒体查询</title>
    <!-- 通用样式写在最前面 -->
    <!-- 注意工作中，各个视口相同的样式或者相似的样式 要提取出来，防止书写多次-->
    <link rel="stylesheet" href="./css/common.css">
    <!-- 针对不同视口选择不同样式 -->
    <!-- 为了避免更改顺序，导致临界点发生改变，通常我们会错开1px -->

     <!-- 在视口>1000时，显示红色字体，绿色背景 -->
    <!-- 在视口<=1000时，显示蓝色字体，粉色背景 -->
    <link rel="stylesheet" href="./css/large.css" media="screen and (min-width:1001px)">
    <link rel="stylesheet" href="./css/small.css" media="screen and (max-width:1000px)">

    <style>
        /* 公用样式 */
        .box{
            font-weight: 700;
        }
        @media screen and (min-width:1001px) {
            .box {
                border: 5px solid yellow;
                font-size: 50px;
            }
        }

        @media screen and (max-width:1000px) {
            .box {
                border: 5px solid aqua;
                font-size: 30px;
            }
        }
    </style>

</head>

<body>
    <div class="box">爱创课堂</div>
</body>

</html>